<script setup>
import { reactive, ref } from 'vue';
import YHeader from '@/components/YHeader.vue';
import {
    Card,
    Grid,
    GridItem,
    Image as VanImage,
    Divider,
    List,
    Cell,
    showFailToast,
    showSuccessToast,
    Button
} from 'vant';
import { useRouter, useRoute } from 'vue-router';
const router = useRoute();
const route = useRouter();
const classTitle = ref(router.query.t);
const classDes = ref(router.query.d);
// const joining = ref(false); // 加入课堂加载状态

// 课堂信息
const classInfo = reactive({
    title: classTitle.value,
    description: classDes.value,
    cover: 'https://img.yzcdn.cn/vant/cat.jpeg',
});

// 教师列表
const teachers = reactive([
    {
        id: 1,
        name: '张老师',
        title: '前端架构师',
        avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
    },
    {
        id: 2,
        name: '李老师',
        title: '全栈工程师',
        avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
    },
]);

// 学生列表
const students = reactive([
    {
        id: 101,
        name: '王同学',
        studentId: 'S001',
        avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
    },
    {
        id: 102,
        name: '陈同学',
        studentId: 'S002',
        avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
    },
]);

// const handleJoinClass = async () => {
//     // if (!localStorage.getItem('token')) {
//     //     Toast('请先登录');
//     //     return router.push('/login');
//     // }

//     try {
//         joining.value = true;
//         // 模拟API请求
//         await new Promise(resolve => setTimeout(resolve, 1000));

//         showSuccessToast('加入成功');
//         // 刷新学生列表（实际应通过API更新）
//         students.value.push({
//             id: Math.random(),
//             name: '新学员',
//             studentId: 'S003'
//         });
//     } catch (error) {
//         showFailToast('加入失败');
//     } finally {
//         joining.value = false;
//     }
// };


const stuInfo = () => {
    route.push('/stuInfo')
}
</script>

<template>
    <YHeader></YHeader>
    <div class="classroom-page">
        <!-- 课堂介绍 -->
        <Card class="class-card">
            <template #thumb>
                <VanImage width="80" height="80" :src="classInfo.cover" radius="8" />
            </template>
            <template #title>
                <div class="header-container">
                    <h3>{{ classInfo.title }}</h3>
                    <!-- <Button type="primary" size="small" :loading="joining" @click="handleJoinClass" class="join-btn">
                        {{ joining ? '加入中...' : '加入课堂' }}
                    </Button> -->
                    <Button type="primary" size="small" @click="stuInfo">统计</Button>
                </div>
            </template>
            <template #desc>
                <div class="class-desc">
                    {{ classInfo.description }}
                </div>
            </template>
        </Card>

        <!-- 教师列表 -->
        <Divider content-position="left">授课教师</Divider>
        <Grid :column-num="3" :border="false">
            <GridItem v-for="teacher in teachers" :key="teacher.id">
                <VanImage round width="60" height="60" :src="teacher.avatar" />
                <div class="teacher-name">{{ teacher.name }}</div>
                <div class="teacher-title">{{ teacher.title }}</div>
            </GridItem>
        </Grid>

        <!-- 学生列表 -->
        <Divider content-position="left">班级成员</Divider>
        <List>
            <Cell v-for="student in students" :key="student.id" :title="student.name" :label="student.studentId">
                <template #icon>
                    <VanImage round width="40" height="40" :src="student.avatar" style="margin-right: 12px" />
                </template>
            </Cell>
        </List>
    </div>
</template>

<style lang="scss">
.classroom-page {
    height: 80%;
    padding: 5px;

    .class-card {
        margin-bottom: 20px;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

        .class-desc {
            margin-top: 8px;
            color: #666;
            line-height: 1.5;
        }

        .header-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;

            h3 {
                margin: 0;
                flex: 1;
            }

            .join-btn {
                margin-left: 16px;
            }
        }
    }

    .teacher-name {
        margin: 8px 0 4px;
        font-weight: 500;
        text-align: center;
    }

    .teacher-title {
        color: #999;
        font-size: 12px;
        text-align: center;
    }

    .van-list {
        .van-cell {
            padding: 12px;
            align-items: center;
        }
    }
}
</style>